import React, { useRef } from "react";
import ReactECharts from "echarts-for-react";

const Chart5 = React.memo(() => {
  let options = {
    title: [
      {
        text: "4月各信息被填写数量",
        x: "20%",
        y: "5%",
        textAlign: "center",
        textBaseline: "middle",
        textStyle: {
          fontSize: 16,
        },
      },
      {
        text: `4月各信息被填写数量`,
        x: "70%",
        y: "5%",
        textAlign: "center",
        textBaseline: "middle",
        textStyle: {
          fontSize: 16,
        },
      },
    ],

    dataset: {
      source: [
        ["type", "nums"],
        ["未录入&退出", 50],
        ["录入客户信息，未提交&退出", 50],
        ["录入至产品类型，未提交&退出", 70],
        ["录入至期次，未提交&退出", 60],
        ["录入至申购金额，未提交&退出", 30],
        ["录入至转出账号，未提交&退出", 40],
        ["录入至本息入账账号，未提交&退出", 90],
        ["录入至交易金额，未提交&退出", 30],
        ["全部录入&提交", 20],
      ],
    },
    color: [
      "#5ab1ef",
      "#b6a2de",
      "#2ec7c9",
      "#ffb980",
      "#d87a80",
      "#8d98b3",
      "#e5cf0d",
      "#97b552",
      "#95706d",
      "#dc69aa",
      "#07a2a4",
      "#9a7fd1",
      "#f5994e",
      "#c14089",
      "#26c0c0",
    ],
    grid: {
      left: 40,
      top: "10%",
      right: "60%",
      // containLabel: true,
    },
    xAxis: [
      {
        show: true,
      },
      {
        show: false,
      },
    ],
    yAxis: {
      type: "category",
      inverse: true,
      show: false,
    },

    series: [
      {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        type: "pie",
        center: ["70%", "40%"],
        radius: [60, 100],

        label: {
          normal: {
            formatter: "{b}\n{d}%",
          },
        },
        labelLine: {
          normal: {
            show: true,
          },
        },
        encode: {
          itemName: "type",
          value: "nums",
        },
      },
      //亮色条 百分比
      {
        show: true,
        type: "bar",
        barWidth: "20%",
        z: 2,
        itemStyle: {
          color: (e) => {
            const colorList = [
              "#5ab1ef",
              "#b6a2de",
              "#2ec7c9",
              "#ffb980",
              "#d87a80",
              "#8d98b3",
              "#e5cf0d",
              "#97b552",
              "#95706d",
              "#dc69aa",
              "#07a2a4",
              "#9a7fd1",
              "#f5994e",
              "#c14089",
              "#26c0c0",
            ];
            return colorList[e?.dataIndex];
          },
        },
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 14,
            },
            position: "right",
          },
        },
        encode: {
          x: "nums",
        },
      },
      //年份
      {
        show: true,
        type: "bar",
        xAxisIndex: 1, //代表使用第二个X轴刻度
        barGap: "-100%",
        barWidth: "10%",
        itemStyle: {
          normal: {
            barBorderRadius: 200,
            color: "transparent",
          },
        },
        label: {
          normal: {
            show: true,
            position: [0, "-20"],
            formatter: "{b}",
            textStyle: {
              fontSize: 14,
              color: "#333",
            },
          },
        },
        encode: {
          y: "type",
        },
      },
    ],
  };

  return (
    <>
      <ReactECharts
        // ref={chartRef}
        option={options}
        style={{ height: 500 }}
        // onEvents={onEvents}
      />
    </>
  );
});

export default Chart5;
